<template>
  <el-card>
    <el-row :gutter="50">
      <el-col :span="12">
        <el-form
          :model="empInfo"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-form-item label="登录名称">
            <el-input v-model="empInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="name">
            <el-input v-model="empInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="empInfo.sex">
              <el-radio value="1" label="1">男</el-radio>
              <el-radio value="0" label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="员工号" prop="idNumber">
            <el-input v-model="empInfo.idNumber"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="empInfo.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-upload
          ref="uploadRef"
          class="avatar-uploader"
          :show-file-list="false"
          action="/api/common/upload"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="empInfo.avatar"
            :src="'/api/common/download?name=' + empInfo.avatar"
            class="avatar"
          />
          <img
            v-else
            src="@/assets/icons/select_avatar.jpg"
            width="278"
          /> </el-upload
      ></el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'
import { reqUpdateEmpInfo, reqEmployeeInfo } from '@/api/employee'
const userStore = useUserStore()
// 从userStore中解构出id, username, name, idNumber, phone, sex
// 其中 id仅仅用于更新信息成功后，重新获取emp信息
// store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value，
// 就像 setup 中的 props 一样，如果你写了，我们也不能解构
const {
  empInfo: { id, username, name, idNumber, phone, sex, avatar }
} = userStore

console.log(username)

const empInfo = ref({ username, name, idNumber, phone, sex, avatar })

const rules = {
  name: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  idNumber: [
    {
      pattern: /^[0-9A-Za-z]{3,15}$/,
      message: '员工号长度为3-15位，且只能由数字、字母组成',
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    {
      pattern: /^\d{11}$/,
      message: '手机号码必须是11位数字',
      trigger: 'blur'
    }
  ]
}

// 图片上传之前的回调
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('头像图片必须是 JPG 或 PNG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('头像图片不能超过 1MB!')
    return false
  }
  return true
}

// 图片上传成功的回调
const handleAvatarSuccess = (response, uploadFile) => {
  // URL.createObjectURL(blob)可以获取当前文件的一个内存URL
  // imageUrl.value = URL.createObjectURL(uploadFile.raw)
  // 获取服务器返回的图片名称
  empInfo.value.avatar = response.data
  console.log('头像图片上传名：', empInfo.value.avatar)
}

//修改个人信息
const formRef = ref()
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await reqUpdateEmpInfo(empInfo.value)
    // 更新store中的员工信息
    const resEmpInfo = await reqEmployeeInfo(id)
    userStore.setEmpInfo(resEmpInfo.data.data)
    // empInfo.value = userStore.empInfo
    ElMessage.success('修改成功')
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader .avatar {
  width: 282px;
  height: 282px;
  display: block;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 282px;
  height: 282px;
  text-align: center;
}
</style>
